<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<script src="../resources/common.js"></script>

<p id="description"></p>
<select id="select1" size="4">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
<div id="result">FAIL</div>
<div id="console"></div>

<script>
description('Test if \'change\' event is dispatched when selecting an item by mouse dragging in a non-multiple listbox.');

function handleChange() {
    $('result').textContent = 'PASS: A click event was dispatched.';
}
$('select1').addEventListener('change', handleChange);

if (!window.eventSender) {
    debug('Press the left button on an item in the listbox, move the pointer to another item, and release the button. You\'ll see a "PASS" message.');
} else {
    mouseMoveToIndexInListbox(1, 'select1');
    eventSender.mouseDown(0);
    mouseMoveToIndexInListbox(2, 'select1');
    eventSender.mouseUp(0);
}
</script>
</body>
</html>
